<template>
  <k-view class="stock-diagnosis-card">
    <k-view class="card-info-view">
      <k-view class="left-view">
        <k-text class="stock-name" @click="goFenshi">{{ stockName }}</k-text>
        <k-text class="stock-code num-j-r">{{ stockInfo.code }}</k-text>
      </k-view>
      <k-view class="right-view">
        <k-text :class="['stock-score num-j-r', formatNum(chg).colorClass + '-font']">{{
          price
        }}</k-text>
        <k-view class="stock-percent">
          <k-text :class="['price-text num-j-r', formatNum(chg).colorClass + '-font']"
            >{{ formatNum(inc).signStr }}
          </k-text>
          <k-text :class="['rise-text num-j-r', formatNum(chg).colorClass + '-font']">{{
            formatNum(chg).signStr
          }}</k-text>
        </k-view>
      </k-view>
    </k-view>
    <k-view class="card-action" v-show="stockInfo.code">
      <k-view
        v-if="stockAddStatus === 'has_added'"
        @click="delStock"
        class="stock-action-icon remove-stock"
      ></k-view>
      <k-view
        v-else-if="stockAddStatus === 'add'"
        @click="addStock"
        class="stock-action-icon add-stock"
      ></k-view>
    </k-view>
  </k-view>
</template>

<script>
import Apis from '@king-fisher/apis';
import { formatNumber, jumpToFenshi } from '@/utils';
import addIcon from '../../assets/index/add_icon.png';
import removeIcon from '../../assets/index/remove_icon.png';
import { getNativeHqData } from '@/utils/hqData';
import { addCodeIntoList, getNativeSelfCodeList, removeCodeFromList } from '@/utils/selfCode';
import { sendClickStat } from '@/utils/stat';
import { PAGEID } from '@/config/stat';
export default {
  props: {
    stockInfo: {
      type: Object,
      default: () => {
        return {
          code: '--',
          market: '',
          score: '--',
          name: '--',
        };
      },
    },
  },
  data() {
    return {
      removeIcon,
      addIcon,
      chg: '--',
      price: '--',
      name: '--',
      inc: '--',
      selfCodeList: [],
    };
  },
  methods: {
    formatNum(num) {
      return formatNumber(num);
    },
    goFenshi() {
      sendClickStat(`${PAGEID.STOCK}.details.click`);
      jumpToFenshi(this.stockInfo.code, this.stockInfo.market, this.stockInfo.name);
    },
    getHqData() {
      if (this.stockInfo.code && this.stockInfo.market) {
        const stockCode = this.stockInfo.code;
        const marketId = this.stockInfo.market;
        getNativeHqData({
          protocolId: 1264,
          pageId: 2210,
          requestDic: `startrow=0\r\nrowcount=1\r\nsortid=-1\r\ncolumnorder=10|34818|55|233|34821|6\r\nnewrealtime=1\r\nselfstockcustom=1\r\nstocklist=${stockCode}\r\nmarketlist=${marketId}`,
          onlineId: 'hqData',
        }).then(res => {
          const hqData = res.data.length > 0 ? res.data[0] : res.data;

          if (hqData.head.errorCode == 0 && hqData.body.dataDict) {
            const hqDataList = hqData.body.dataDict;
            if (hqDataList['34818']) {
              this.chg = hqDataList['34818'][0];
              this.inc = hqDataList['34821'][0];
              this.price = hqDataList['10'][0];
              this.name = hqDataList['55'][0];
            }
          }
        });
      }
    },
    getSelfCodeList() {
      getNativeSelfCodeList().then(res => {
        if (res && res.selfCodeList) {
          this.selfCodeList = res.selfCodeList;
        }
      });
    },
    addStock() {
      if ((this.stockInfo.code, this.stockInfo.market)) {
        sendClickStat(`${PAGEID.STOCK}.add.click`);
        addCodeIntoList(this.stockInfo.code, this.stockInfo.market).then(res => {
          const resultData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
          if (resultData.state === 1) {
            const stockIndex = this.selfCodeList.findIndex(item => {
              return item.stockcode === this.stockInfo.code;
            });
            if (stockIndex === -1) {
              this.selfCodeList.push({
                stockcode: this.stockInfo.code,
                marketid: this.stockInfo.market,
              });
            }
            Apis.Toast.show(resultData.msg);
          } else {
            Apis.Toast.show(resultData.msg);
          }
        });
      }
    },
    delStock() {
      sendClickStat(`${PAGEID.STOCK}.remove.click`);
      removeCodeFromList(this.stockInfo.code, this.stockInfo.market).then(res => {
        const resultData = typeof res.data === 'string' ? JSON.parse(res.data) : res.data;
        if (resultData.state === 10) {
          const stockIndex = this.selfCodeList.findIndex(item => {
            return item.stockcode === this.stockInfo.code;
          });
          if (stockIndex !== -1) {
            this.selfCodeList.splice(stockIndex, 1);
          }
          Apis.Toast.show(resultData.msg);
        } else {
          Apis.Toast.show(res.data.msg);
        }
      });
    },
  },
  mounted() {
    this.getHqData();
    this.getSelfCodeList();
  },
  computed: {
    stockAddStatus() {
      const res = this.selfCodeList.find(item => {
        return item.stockcode === this.stockInfo.code;
      });
      return res ? 'has_added' : 'add';
    },
    stockName() {
      if (this.name === '--') {
        return this.stockInfo.name || '--';
      } else {
        return this.name;
      }
    },
  },
};
</script>

<style lang="less">
.stock-diagnosis-card {
  width: calc(100vw - 48px);
  margin: 0 auto;
  height: 116px;
  padding: 20px 16px;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .card-info-view {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .stock-name {
      color: #262626;
      font-size: 34px;
      font-weight: 600;
    }
    .stock-code {
      font-size: 24px;
      color: #b3b3b3;
    }
    .stock-score {
      font-size: 36px;
      font-weight: 700;
    }
    .stock-percent {
      display: flex;
      align-items: center;
      .price-text {
        font-size: 24px;
        color: #262626;
        margin-right: 16px;
        height: 32px;
      }
      .rise-text {
        font-size: 24px;
        color: #262626;
        height: 32px;
      }
    }
  }
  .left-view,
  .right-view {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .right-view {
    align-items: flex-end;
  }
  .card-action {
    margin-left: 24px;
    .add-stock {
      background-image: url(../../assets/index/add_icon.png);
    }
    .remove-stock {
      background-image: url(../../assets/index/remove_icon.png);
    }
    .stock-action-icon {
      width: 48px;
      height: 48px;
      background-repeat: no-repeat;
      background-size: 100%;
    }
  }
}
[theme-mode='black'] {
  .stock-diagnosis-card {
    background: #1c1c1c;
    .card-info-view {
      .stock-name {
        color: rgba(255, 255, 255, 0.84);
      }
      .stock-code {
        color: rgba(255, 255, 255, 0.6);
      }
      .price-text,
      .rise-text {
        color: rgba(255, 255, 255, 0.84);
      }
    }
    .card-action {
      .remove-stock {
        background-image: url(../../assets/index/remove_icon_dark.png);
      }
    }
  }
}
</style>
